<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>游戏页面</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<link rel="stylesheet/less" type="text/css" href="./src/css/style.less" />
		<script src="./src/css/less.min.js"></script>
		<script src="./src/Base.js"></script>
		<script src="./src/MyPlane.js"></script>
		<script src="./src/Bullet.js"></script>
		<script src="./src/DiPlane.js"></script>
		<style>
			body {
				margin: 0;
				width: 100vw;
				height: 100vh;
				background-image: url('../images/background_1.png');
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<p>击毁敌机数量：<span>0</span> 架</p>
			<p>累积积分：<span>0</span> 分</p>
		</div>

		<div id="duihua">
			<a>立即复活</a>
			<br>
			<a>重新开始</a>
			<br>
			<a>返回主页</a>
		</div>

	</body>

	<script>
		//让背景图滚动起来
		(function() {
			let i = 0;
			let speed = 5;
			setInterval(_ => {
				document.body.style['background-position-y'] = `${(i++)*speed}px`;
			}, 30)
		})()
	</script>

	<script>
		//提供素材
		const myPlaneImg = {
			baseSrc: '../images/myPlane.gif',
			boomSrc: '../images/myPlane_boom.gif',
			className: 'my-plane',
			blood: 1
		}
		const diSmallPlaneImg = {
			baseSrc: '../images/enemy1_fly_1.png',
			boomSrc: '../images/small_boom.gif',
			className: 'di-samll-plane',
			blood: 1,
			speedX: [-2, 2],
			speedY: [-1, 5]
		}
		const diMiddlePlaneImg = {
			baseSrc: '../images/enemy3_fly_1.png',
			beatSrc: '../images/middle_beat.png',
			boomSrc: '../images/middle_boom.gif',
			className: 'di-middle-plane',
			blood: 3,
			speedX: [-2, 2],
			speedY: [-1, 5]
		}
		const diBossPlaneImg = {
			baseSrc: '../images/enemy2_fly_1.png',
			beatSrc: '../images/big_beat.png',
			boomSrc: '../images/big_boom.gif',
			className: 'di-boss-plane',
			blood: 50,
			speedX: [-2, 2],
			speedY: [-1, 5]
		}

		const bulletImg = {
			baseSrc: '../images/bullet1.png',
			boomSrc: '../images/boom.png',
			className: 'bullet',
			width: 4,
			height: 8,
			blood: 1
		}
	</script>
	<script>
		/*************************************************
		 * 初始化游戏状态
		 * status为静态属性，即任何地方都可以通过类名调用
		 * 0:代表游戏还未开始
		 * 1:游戏进行中
		 * 2:游戏结束
		 *************************************************/
		Base.status = 0;
		//所有的敌机
		Base.diAll = [];
		//我方飞机入场
		let myplane = new MyPlane();
		//创建敌机
		setInterval(_ => {
			for (let i = 0; i < 3; i++) {
				Base.diAll.push(new DiPlane(diSmallPlaneImg, myplane));
			}
		}, 3000)
		setInterval(_ => {
			for (let i = 0; i < 2; i++) {
				Base.diAll.push(new DiPlane(diMiddlePlaneImg, myplane));
			}
		}, 8000)
		
		setInterval(_ => {
			for (let i = 0; i < 1; i++) {
				Base.diAll.push(new DiPlane(diBossPlaneImg, myplane));
			}
		}, 10000)
	</script>
</html>
